JavaScript

Javascript is a Scripting Language that is initially used for Client Side in Web Development along with html.

JavaScript ("JS" for short) is a full-fledged dynamic programming language

It was invented by Brendan Eich (co-founder of the Mozilla project, the Mozilla Foundation, and the Mozilla Corporation).

JavaScript was invented by Brendan Eich in 1995, and became an ECMA standard in 1997.

ECMA-262 is the official name of the standard. ECMAScript is the official name of the language

But now it can be used for almost all type of development work

JavaScript Runtimes

Runtime basically means how we are going to run our Code in CPU.Which interpretors/SW used to Convert our code to Machine Code.

To Execute JavaScript Code, A Runtime is needed.

In case of Browsers there are inbuilt JS Engines that executes JS. Popular JS Engines are V8 in Chrome, Spider Monkey in Firefox etc..

Other than browsers there are Node and Deno that can be used as JS Runtime Environments.

Node is the most opular for now for Non browser JS Environment.

What JS can and cannot Do in Browser

image.png


The Above Code will prompt Hello World in the Browser.

The browser runs the HTML code Line wise in a Tree like Structure.

image.png

DOM - Document Object Model

Document Object Model, or DOM for short, represents all page content as objects that can be modified.

The document object is the main “entry point” to the page. We can change or create anything on the page using it.

Parsing - means the DOM tree is being made in the Background.

Now once the Tree is being made after Parsing we need to Paint it in the Browser. This is called Rendering.

The Code in the Script Tag will Stop/Block the Rendering (running) of the Lines Below it. First all the commands in the Script tags will run then only we move to the next child.

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

                <!DOCTYPE HTML>
                <html>
                <head>
                  <style>
                    table {
                      border-collapse: collapse;
                    }

                    td {
                      border: 1px solid black;
                      padding: 3px 5px;
                    }
                  </style>
                </head>

                <body>
                  <table>
                    <tr>
                      <td>1:1</td>
                      <td>2:1</td>
                      <td>3:1</td>
                      <td>4:1</td>
                      <td>5:1</td>
                    </tr>
                    <tr>
                      <td>1:2</td>
                      <td>2:2</td>
                      <td>3:2</td>
                      <td>4:2</td>
                      <td>5:2</td>
                    </tr>
                    <tr>
                      <td>1:3</td>
                      <td>2:3</td>
                      <td>3:3</td>
                      <td>4:3</td>
                      <td>5:3</td>
                    </tr>
                    <tr>
                      <td>1:4</td>
                      <td>2:4</td>
                      <td>3:4</td>
                      <td>4:4</td>
                      <td>5:4</td>
                    </tr>
                    <tr>
                      <td>1:5</td>
                      <td>2:5</td>
                      <td>3:5</td>
                      <td>4:5</td>
                      <td>5:5</td>
                    </tr>
                  </table>
                  <script>
                    let table = document.body.firstElementChild;

                    for (let i = 0; i < table.rows.length; i++) {
                      let row = table.rows[i];
                      row.cells[i].style.backgroundColor = 'red';
                    }
                  </script>
                </body>
                </html>

If we Want our JavaScript Code To run from external file.

image.png

Difference Between Defer and Async and Normal

In Defer the HTML code will Parsed first without running Script(JS) file. and once the HTML code is parsed it'll execute the JS code.

In Async the HTML code will be parsed only till the time JS file is being Downloaded parallely means(JS needs its files to download first and then runs on the browser). and when the file is download it'll block the HTML and runs the Script.

In Normal Js the HTML code will be blocked , and first the Script file is executed after that it moves to HTML code


Normal Example

image.png

In Normal - Runs Order wise Blocks HTML

image.png

image.png

image.png



Defer - Runs HTML code then Runs Scripts orderwise

image.png

image.png


Async - Executes Scripts which are downloaded first (No Gurantee of Order)

image.png

image.png

Variables and DataType in JavaScript

image.png


JavaScript is Dynamic Typed language

image.png



 alert("2 plus 2 equals " + 2 + 2);
...JavaScript automatically converts the numbers to strings, and displays the message "2
plus 2 equals 22".